<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <CommonCard title="今日销售额" :value="salesToday!">
      <template #default>
        <div class="wrap">
          <div class="compare">
            <div>日同比</div>
            <div class="item">{{ salesGrowthLastDay }}%</div>
            <div :class="salesGrowthLastDay!>0?'increment':'decrement'"></div>
          </div>
          <div class="compare">
            <div>月同比</div>
            <div class="item">{{ salesGrowthLastMonth }}%</div>
            <div :class="salesGrowthLastMonth!>0?'increment':'decrement'"></div>
          </div>
        </div>
      </template>
      <template #bottom>
        <div>
          <span>昨日销售额</span>
          <span>{{ salesLastDay }}</span>
        </div>
      </template>
    </CommonCard>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "TodaySales",
});
</script>

<script setup lang="ts">
import { computed } from "vue";
import CommonCard from "./CommonCard.vue";
import useReportDataStore from "@/stores/reportData";

const reportDataStore = useReportDataStore();

const salesToday = computed(() => reportDataStore.reportData?.salesToday);
const salesLastDay = computed(() => reportDataStore.reportData?.salesLastDay);
const salesGrowthLastDay = computed(
  () => reportDataStore.reportData?.salesGrowthLastDay
);
const salesGrowthLastMonth = computed(
  () => reportDataStore.reportData?.salesGrowthLastMonth
);
</script>

<style scoped>
.wrap {
  flex-direction: column;
  display: flex;
  justify-content: space-around;
  height: 100%;
}
.compare {
  font-size: 12px;
  display: flex;
  align-items: center;
}
.item {
  margin: 0 10px;
}
.increment {
  width: 0;
  height: 0;
  border-width: 4px;
  border-color: transparent transparent green transparent;
  border-style: solid;
}

.decrement {
  width: 0;
  height: 0;
  border-width: 4px;
  border-color: red transparent transparent transparent;
  border-style: solid;
}
</style>
